<template>
	<view class="content">
		<view class="inputbkc">
			<input v-model.trim="username" class="uni-input" focus placeholder="输入昵称(必填)" />
		</view>
		<view class="tishi">
			<image class="tsico" src="../../static/images/umcsdk_exception_icon.png"></image>
			<text class="tstxt">最多14个英文字符或7个汉字，30天内只能修改一次</text>
		</view>
		<view>
			 <button class="btn" type="default" @click="saveusername()">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				uid: '',
			}
		},
		onLoad(option) {
			this.username = option.username;
			this.uid = option.uid;
		},
		methods: {
			saveusername() {
				// 编辑用户名字
				if(this.username.trim() == '') {
					// 提示不能输入空名字
					uni.showToast({
					    title: '用户昵称不能为空',
						icon: 'none',
					    duration: 2000
					});
					return;
				}
				uni.request({
				    url: 'https://www.yedushu.cn/api/saveusername',  // 保存用户名字
				    data: {
				        username: this.username,
						uid: this.uid
				    },
					method: 'POST',
				    success: (res) => {						
						if(res.data.code == 2){
							// 用户名存在
							uni.showToast({
							    title: '用户昵称已存在',
								icon: 'none',
							    duration: 2000
							});
							return;
						}
						if(res.data.code == 1){
							var userinfo = uni.getStorageSync('userinfo');
							// console.log(JSON.stringify(userinfo));
							userinfo['user_name'] = this.username; // 设置对象中的值
							uni.setStorageSync('userinfo', userinfo);  // 重新存储到本地
							// console.log(JSON.stringify(userinfo));
							// 触发资料与帐号设置（setmyselft.vue）页上的事件，更新用户名字
							uni.$emit("setnick",{
									username: this.username,
								},
							);
							// 用户名修改成功，返回上一页
							uni.navigateBack({
							    delta: 1
							});
						}						
				    }
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		padding: 10px 10px;
	}
	.inputbkc {
		background-color: #f4f4f4;
		padding: 7px 7px;
		border-radius: 7px;
	}
	.uni-input {
		padding-left: 5px;
		font-size: 15px;
	}
	.tishi {
		padding: 10px 5px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.tishi .tsico {
		width: 15px;
		height: 15px;
	}
	.tishi .tstxt {
		font-size: 12px;
		padding-left: 5px;
		color: #b2b2b2;
	}
	.btn {
		background-color: #00cc33;
		color: #FFFFFF;
	}
</style>
